<template>
	<view class="box">
		<view class="top_wrapper hidden flex1">
			<view class="top bg_f5 flex3 w_flex1 text-ellipsis">
				<navigator :url="url" open-type="redirectTo" hover-class="none" class="top_left flex3">
					<view class="font_27 text_bold">{{city_data.city}}</view>
					<image src="../../static/image/index/n@2x.png"></image>
				</navigator>
				<view class="w_flex1 flex1 text-ellipsis" v-if="is_map" @click="get_map_wrapper">
					<view class="w_flex1 text-ellipsis">
						<view style="height: 100%;" class="flex3 text-ellipsis" v-if="hot_data">
							<view class="font_31 van-ellipsis">{{hot_data.region_name}}</view>
						</view>
						<swiper class="swiper hidden" :interval="2500" autoplay circular vertical v-else>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">搜索地点查找附近寄存点</view>
							</swiper-item>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">点击地图上的橙色图标即可预订</view>
							</swiper-item>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">双指可缩放地图，查看更多寄存点</view>
							</swiper-item>
						</swiper>
					</view>
					<image src="../../static/image/index/b.png" class="top_icon"></image>
				</view>
				<view class="w_flex1 text-ellipsis" v-else>
					<van-field placeholder="输入位置、地标、景点" placeholder-style="color: #acacac" :value="hot_data.region_name"
						class="font_31 text-ellipsis" auto-focus clearable @input="get_search2" @clear="get_clear"
						@confirm="getConfirm" />
				</view>
			</view>
			<view class="bg_fff font_27 flex7 quxiao" v-if="!is_map" @click="is_map = true;">取消</view>
		</view>
		<!-- 地图 -->
		<view class="map_wrapper" v-if="is_map">
			<view class="main">
				<!-- <map subkey="NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU" layer-style="2" id="maps" show-location -->
				<map subkey="YCQBZ-5WMCW-CLERI-Y7HKG-MAAVE-R4BHV" layer-style="2" id="maps" show-location
					:longitude="centerCity ? centerCity.lng : hot_data ? hot_data.lng: city_data.longitude"
					:latitude="centerCity ? centerCity.lat : hot_data ? hot_data.lat:city_data.latitude" :markers="markers_list" :scale="scale"
					:class="!show?'active': ''" @markertap="get_mark" @regionchange="get_reg"></map>
			</view>
			<view class="map_icon" @click="get_scale">
				<image src="../../static/image/index/p@2x.png"></image>
			</view>
			<view class="map_centre">
				<!-- <image src="../../static/image/index/j1@2x.png" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 热门地点 -->
		<view v-else>
			<v-search ref="search" @get_change="get_change"></v-search>
		</view>
    <view class="modal_wrapper all" v-if="!show" @click="alls()" style="font-weight: bold; font-size: 26rpx;"><view>显示<view>所有</view></view></view>
		<!-- 店铺显示 -->
		<view class="modal_wrapper bg_f5" :class="{on : className === 1}" v-if="show" @touchmove="changeScroll" @touchstart="touchstarts" @touchend="touchends">
      <view class="zb-top">
        <!-- --{{scale}} -->
        <view style="font-weight: bold;">{{city_data.city}}</view>
        <view class="chang-scale"><view class="l"></view></view>
        <view class="close" @click="close()"> <image src="../../static/image/user/close.png" class="ico" mode=""></image> </view>
      </view>
			<!-- <view class="modal_top_title"></view> -->
			<scroll-view class="modal_center hidden" :scroll-y="scrollY" @scroll="scrollView">
				<navigator :url="'/pages/index/detail?id=' + item.id+'&order='+order_id" hover-class="none" class="modal_list hidden"
					v-for="item in store_list" :key="item.id">
					<view class="modal_top flex1">
						<view class="modal_image">
							<image :src="item.image_text[0]" class="bg_image active"></image>
							<image src="../../static/image/index/r@2x.png" class="bg_icon"></image>
						</view>
						<view class="modal_content">
							<view class="font_30 text_bold" style="margin-bottom: 10rpx;">{{item.store_name}}</view>
							<view class="font_23 modal_m1 flex3" v-if="item.status == 1"><image src="../../static/image/index/zb-ico1.png" class="zxb-ico"></image>{{item.business_hours}}</view>
							<view class="font_23 modal_m1" v-else>停业中</view>
							<view class="flex3 font_23">
                <view class="flex3" style="margin-right: 20rpx;"><image src="../../static/image/index/zb-ico3.png" class="zxb-ico"></image>￥{{item.packsack}}/件/天</view>
                <view class="flex3"><image src="../../static/image/index/zb-ico2.png" class="zxb-ico"></image>￥{{item.trunk}}/件/天</view>
							</view>
							
						</view>
					</view>
          <view class="flex1" style="margin-top: 8rpx; align-items: center; " v-if="item.position">
            <image src="../../static/image/index/w@2x.png" mode="heightFix" style="height: 25rpx;width: 20rpx;margin: 4rpx 16rpx 0 0;" />
            <view class="font_23 flex1 color_7b" style="flex: 1; width: 100%;">{{item.position}}</view>
          </view>
					<view class="modal_bottom flex1" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx;">
						<view class="modal_bottom_block font_23 color_fff" v-for="itemText in item.label_text"
							:key="itemText">{{itemText}}</view>
              <view class="font_30 text_bold modal_btn color_fff">查看</view>
					</view>
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search/index.vue';
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

	export default {
		components: {
			'v-search': search
		},
		data() {
			return {
				url: '',
				mapIocn: null,
				from_name: '',
				back_index: false,
				store_id: null,
				store_list: [],
				city_data: null,
				hot_data: null,
				markers_list: [],
				is_map: true, // 地图是否显示
				show: false, // 店铺是否展示
				scale: 12, // 地图缩放级别
				lastTapDiffTime: 0, // 双击
				lastTapTimeoutFunc: null, // 双击
				store_array: [],
        moveY:null,
        className:0,
        shows:false,
        scrollTop:0,
        centerCity:null,
        scrollY:false,
        scrollTopStart:0,
        curScrollTop:0,
        order_id:''
			}
		},
		onLoad(e) {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');
      this.order_id = e.order;
      console.log(e.order)
      // if(this.hot_data){
      //   this.scale = 14
      // }else{
      //   this.scale = 12
      // }

			this.url = './city_search?from=true';
      this.$http.get(this.$api.getCityCenter,{region_name:this.city_data.city}).then(res=>{
        console.log(res)
        if(res.data.lat && res.data.lng){
          this.centerCity = {lat:res.data.lat, lng:res.data.lng}
        }
      })
			setTimeout(() => {
				this.from_name = e.type;
				this.mapIocn = uni.createMapContext('maps');
			}, 300)

			// if (e.type === 'city') {
			// 	// 城市
			// 	this.url = './city_search?from=true';
			// }

			if (e.type === 'area') {
				// 热门地区
				this.is_map = false;

				setTimeout(() => {
					this.$refs.search.get_search('');
				}, 100)
			}

			if (e.show) {
				this.back_index = true;
			}

			this.getStoreListByRegionName();
		},
		onShow() {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');

			
		},
		onUnload(e) {
			if (this.back_index) {
				uni.reLaunch({
					url: './index'
				})

				return true;
			}
		},
		methods: {
      touchstarts(e){
        this.scrollTopStart = e.changedTouches[0].clientY;
        console.log('touchstarts',this.scrollTopStart)
      },
      touchends(e){
        const end = e.changedTouches[0].clientY;
        if(this.className === 1){
          this.scrollY = true;
        }
      },
      alls(){
        this.show = true;
        this.className = 0;
        this.scrollTop = 0;
      },
      scrollView(e){
        this.curScrollTop = e.detail.scrollTop;
        console.log('scrollTop===>',this.curScrollTop)
      },
      changeScroll(e){
        const top = e.changedTouches[0].clientY;
        if(top - this.scrollTopStart < 0 && !this.scrollY){
            this.show = true;
            this.className = 1;
        }else if(top - this.scrollTop > 0 && this.curScrollTop === 0){
          this.className = 0;
          this.scrollY = false;
        }
        
      },
      close(){
        this.shows = true;
        this.show = false;
        this.className = 0;
        this.scrollTop = 0;
        this.scrollY = false;
      },
      
      move(e){
        const y = e.touches[0].clientY;
        if(this.moveY){
          if(y - this.moveY > 15){
            console.log('变矮');
            this.className = 0;
            this.moveY = 0
          }else if(y - this.moveY < -15){
            this.className = 1;
            this.moveY = 0
            console.log('拉高')
          }
        }else{
          this.moveY = y
        }
        
        // console.log('move====>',e.touches[0].clientY)
      },
			getStoreListByRegionName() {
				let self = this;
				this.markers_list = [];

				this.$http.post(this.$api.getStoreListByRegionName, {
					region_name: this.city_data.city,
					lng: this.city_data.longitude,
					lat: this.city_data.latitude
				}, true).then(res => {
					if (res.code == 200) {
						let list_ = res.data || [];
						this.store_list = list_;
						this.store_array = list_;

						if (list_.length > 0) {
							list_.forEach((n, k) => {
								this.markers_list.push({
									id: n.id,
									width: 32,
									height: 38,
									latitude: n.lat,
									longitude: n.lng,
									iconPath: '../../static/image/index/ｏ@2x.png'
								})
							})

							this.get_mark(this.markers_list[0], true);
						}
					}

					if (res.code == 2001) {
						let self = this;
						setTimeout(() => {
							uni.redirectTo({
								url: self.url
							})
						}, 2000)
					}

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }					
				})
			},
			getStoreByHotRegionId() {
				let self = this;
				this.markers_list = [];

				if (!this.hot_data) {
					this.getStoreListByRegionName();
					return
				}

				this.$http.get(this.$api.getStoreByHotRegionId, {
					region_id: this.hot_data.region_id
				}).then(res => {
					let list_ = res.data;
					this.store_list = list_;

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }

					list_.forEach((n, k) => {
						this.markers_list.push({
							id: n.id,
							width: 32,
							height: 38,
							latitude: n.lat,
							longitude: n.lng,
							iconPath: '../../static/image/index/ｏ@2x.png'
						})
					})
				})
			},
			// 标记点
			get_mark(e, type) {
        this.show = true;
				if (!this.is_map) return

				let markerId = null;
				if (type) {
					markerId = e.id
				} else {
					markerId = e.detail.markerId;
				}
				this.store_id = markerId;

				this.markers_list.forEach((n, k) => {
					if (n.id === markerId) {
						n.width = 40
						n.height = 50
						n.iconPath = '../../static/image/index/q@2x.png'
						if (!type) {
							this.store_list = [this.store_array[k]];
						}
					} else {
						if (n.id) {
							n.width = 32
							n.height = 38
							n.iconPath = '../../static/image/index/ｏ@2x.png'
						}
					}
				})

				this.show = true;
			},
			// 双击放大地图
			get_scale() {
				let _this = this;

				_this.mapIocn.moveToLocation(); // 回到定位的地方
				return

				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				// 两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					// 双击
					_this.scale++;
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						// 单击
						_this.mapIocn.moveToLocation();
					}, 300);
				}
			},
			// 滑动地图
			get_reg() {
				return
				this.show = false;

				this.markers_list.forEach((n, k) => {
					if (n.id) {
						n.width = 32
						n.height = 38
						n.iconPath = '../../static/image/index/ｏ@2x.png'
					}
				})
			},
			// 清除
			get_clear() {
				this.$refs.search.get_search('');
			},
			get_search2(e) {
				this.$refs.search.get_search(e.detail);
			},
			get_change(e) {
				this.hot_data = uni.getStorageSync('hotArea');
				this.is_map = true;
				this.scale = 14;
        console.log('get_change====>',this.hot_data,this.centerCity)
        if(this.centerCity){
          this.centerCity.lng = this.hot_data.lng;
          this.centerCity.lat = this.hot_data.lat;
        }
        
				// 店铺
				if (this.hot_data.search) {
					this.get_mark({
						detail: {
							markerId: this.hot_data.region_id
						}
					})
					this.$forceUpdate();
				}
			},
			get_map_wrapper() {
				this.is_map = false;
				this.show = false;

				this.markers_list.forEach((n, k) => {
					n.width = 32
					n.height = 38
					n.iconPath = '../../static/image/index/ｏ@2x.png'
				})

				setTimeout(() => {
					this.$refs.search.get_check(this.hot_data.region_name);
				}, 10)
			},
			// 百度经纬度转换腾讯经纬度
			reverseLocation(lat, log) {
				let tx_log = '';
				let tx_lat = '';
				var that = this;
				console.log(lat);
				console.log(log);
				// 实例化API核心类
				var demo = new QQMapWX({
					// key: 'NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU',
					key: 'YCQBZ-5WMCW-CLERI-Y7HKG-MAAVE-R4BHV'
				});
				// 调用接口
				demo.reverseGeocoder({
					location: {
						latitude: lat,
						longitude: log
					},
					coord_type: 1, //baidu经纬度
					success: function(res) {
						console.log(res)
						tx_lat = res.result.ad_info.location.lat;
						tx_log = res.result.ad_info.location.lng;
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				});

				return {
					tx_lat: tx_lat,
					tx_log: tx_log
				}
			},
			// 点击完成
			getConfirm() {
				return
				let list = this.$refs.search.getBackList();

				if (list.length > 0) {
					this.store_list = list;
					this.show = true;
					this.is_map = true;
          
				} else {
					getApp().get_msg('未搜索到结果')
				}
			}
		}
	}
</script>

<style lang="less">
  .zxb-ico{width: 32rpx; height: 32rpx; margin-right: 6rpx;}
  @keyframes height{
    0%{max-height: 30vh;}
    100%{max-height: 70vh;}
  }
  @keyframes heights{
    0%{max-height: 70vh;}
    100%{max-height: 30vh;}
  }
	.top_wrapper {
		padding: 0 20rpx;
	}

	.swiper {
		height: 54rpx;

		view {
			line-height: 54rpx;
		}
	}

	.top {
		width: 704rpx;
		height: 62rpx;
		margin: 12rpx auto 23rpx;
		border-radius: 12rpx;

		input {
			flex: 1;
		}
	}

	.top_left {
		height: 100%;
		margin-right: 23rpx;
		padding: 0 23rpx;
		border-right: 1px solid #fff;

		image {
			width: 17rpx;
			height: 17rpx;
			margin-left: 4rpx;
			margin-top: 18rpx;
		}
	}

	.top_icon {
		width: 34rpx;
		height: 34rpx;
		padding: 10rpx;
		margin: 0 23rpx;
	}

	.main {
		height: calc(100vh - 96rpx);

		map {
			width: 100%;
			height: 100%;

			&.active {
				height: 100%;
			}
		}

		&.active {
			background-color: #fff;
		}
	}

	.map_icon {
		right: 17rpx;
		bottom: 200rpx;
		position: fixed;

		image {
			width: 127rpx;
			height: 127rpx;
		}
	}
  .modal_wrapper.on{
    // .modal_center{animation-name: height; animation-duration: 0.3s; animation-fill-mode: forwards;}
    .modal_center{max-height: 70vh;}
  }
  .modal_wrapper.nos{
    // .modal_center{animation-name: heights; animation-duration: 0.3s; animation-fill-mode: forwards;}
  }
  
	.modal_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		border-radius: 29rpx 29rpx 0 0;background-color: #fff; box-shadow: 0 0 8px #ddd;
    &.all{width: 98rpx; height: 98rpx; background-color: #fff; border-radius: 50%; box-shadow: 0 0 6px #ccc; bottom: 30vh; left: auto; right: 4.5%; font-size: 20rpx; text-align: center; display: flex; align-items: center; justify-content: center;}
    .zb-top{
      height: 80rpx; border-bottom: 1px solid #ededed; display: flex; align-items: center; justify-content: space-between; max-width: 730rpx; margin: 0 auto;
      .close{width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center;}
      .ico{width: 40rpx; height: 40rpx;}
      .chang-scale{width: 180rpx; height: 140rpx; display: flex; align-items: center; justify-content: center;
        .l{width: 60rpx; height: 8rpx; background-color: #FF6A00; border-radius: 4rpx; margin-bottom: 20rpx;}
      }
    }
		.modal_top_title {
			height: 33rpx;
			z-index: 99;
		}
    
		.modal_center {
			overflow-y: auto; transition: all ease 0.3s;
			max-height: 30vh;
		}
	}

	.modal_list {
		padding: 0 31rpx; border-bottom: 16rpx solid #f5f5f5;
		margin: 33rpx auto;
		background-color: #fff;
		box-sizing: border-box;

		&:first-child {
			margin-top: 0;
		}

		.modal_top {
			margin-top: 23rpx;
			margin-bottom: 12rpx;
			padding-bottom: 12rpx;
			
		}
    .modal_btn {
    	margin-left: 38rpx;
    	padding: 8rpx 12rpx;
    	border-radius: 12rpx;
    	background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
    }
		.modal_image {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;
			margin-right: 29rpx;
			border-radius: 23rpx;

			.bg_image {
				width: 100%;
				height: 100%;

				&.active {
					filter: blur(4px);
				}
			}

			.bg_icon {
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 33rpx;
				position: absolute;
			}
		}

		.modal_content {
			flex: 1;

			
		}

		.modal_m1 {
			margin: 8rpx 0;
		}

		.modal_bottom {
      border-top: 1px dashed #D2D2D2; padding-top: 20rpx; margin-top: 20rpx;
			.modal_bottom_block {
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
				margin-right: 23rpx;
				// margin-bottom: 23rpx;

				&:first-child {
					background-color: #FE9A01;
				}

				&:nth-child(2) {
					background-color: #FDC400;
				}

				&:nth-child(3) {
					background-color: #4B7CE5;
				}
			}
		}
	}

	.map_wrapper {
		position: relative;

		.map_centre {
			top: 50%;
			left: 50%;
			position: absolute;
			-webkit-transform: translateX(-50%) translateY(-50%);

			image {
				width: 40rpx;
				height: 66rpx;
			}
		}
	}

	.top /deep/ .van-cell {
		padding: 0 20rpx 0 0;
		background-color: transparent;
	}

	.quxiao {
		padding: 20rpx;
		height: 62rpx;
		margin-top: 12rpx;
		box-sizing: border-box;
	}

	.text-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	/deep/ .van-field__input {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
</style>
